<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
        }

        ul li {
            width: 23%;
            margin: 1%;
            border: 1px solid #000;
            box-sizing: border-box;
            text-align: center;
        }

        img {
            width: 100%;
            height: 200px;
            background-color: #f00;
        }

        .page {
            display: flex;
            align-items: center;
            font-size: 20px;
        }

        .page ol {
            display: flex;
        }

        .page ol li {
            width: 30px;
            height: 30px;
            text-align: center;
            border: 1px solid #000;
            line-height: 30px;
            margin: 10px;
        }

        .page span {
            background-color: #ff0;
        }

        .active {
            color: red;
            border-color: red !important;
        }

        .disabled {
            background-color: #ddd !important;
        }
    </style>
</head>

<body>


    <ul id="list">
        <!-- <li>
                <img src="" alt="">
                <h3>标题</h3>
                <p>详细描述</p>
                <strong>价格</strong>
        </li> -->
    </ul>



    <div class="page">
        <span class="prev disabled">&lt;</span>
        <ol>
            <!-- <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li> -->
        </ol>
        <span class="next">&gt;</span>
    </div>

    <script src="../js/data.js"></script>
    <script>

        // 显示第几页  page
        // 总共有多少页  pageAll 
        // 每页显示多少条数据  pageLen 
        // 获取元素(ul  ol  上下)

        // 初始化
        //    默认显示列表
        //    显示分页  1 2 3 4 ...

        // 事件
        //    上下翻页
        //    页数翻页


        // 遇到的问题
        //    1 显示列表这个函数  会被反复的调用   就把分页的active 和 上下翻页的disabled 都放在这个函数中进行处理
        //    2 列表中需要处理分页的active  所以在init函数中 需要先调用  renderPageList 有了页数之后才调用  renderList




        class Page {
            constructor(list, pageList, pageLen) {
                this.data = data;
                this.page = 1;
                // 每页的长度
                this.pageLen = pageLen;
                // 总共的页数
                this.pageAll = Math.ceil(this.data.length / this.pageLen);

                // 
                this.oUlList = document.querySelector(list);
                this.oPageList = document.querySelector(pageList);
                this.oPrev = document.querySelector('.prev');
                this.oNext = document.querySelector('.next');

                this.init();
                this.oLis = this.oPageList.querySelectorAll('li');
                this.event()
            }

            init() {
                // 显示页数
                this.renderPageList();   //  只会被调用一次
                // 显示列表
                this.renderList();     // 调用多次
            }

            renderPageList() {
                let html = '';
                for (let i = 1; i <= this.pageAll; i++) {
                    html += `<li>${i}</li>`
                }

                console.log(this.pageAll);
                this.oPageList.innerHTML = html;


                // 渲染页数之后才能获取oLis
                this.oLis = this.oPageList.querySelectorAll('li');
            }

            renderList() {
                // 0-20  20-40   40-80   80-100   100-108  没有120
                const data = this.data.slice((this.page - 1) * this.pageLen, this.page * this.pageLen);
                let html = data.reduce((prev, item) => {
                    return prev + `<li>
                        <img src="${item.goodsSrc}" alt="">
                        <h3>${item.goodsTitle}</h3>
                        <p>${item.goodsDes}</p>
                        <strong>${item.goodsPrice}</strong>
                    </li>
                
                `
                }, '')
                this.oUlList.innerHTML = html;


                // 显示分页的active
                for (let i = 0; i < this.oLis.length; i++) {
                    this.oLis[i].classList.remove('active');
                }
                this.oLis[this.page - 1].classList.add('active')



                // 判断能不能点击
                if (this.page === 1) {
                    this.oPrev.classList.add('disabled');
                } else {
                    this.oPrev.classList.remove('disabled');
                }

                if (this.page === this.pageAll) {
                    this.oNext.classList.add('disabled');
                } else {
                    this.oNext.classList.remove('disabled');
                }
            }

            event() {
                // 上翻页
                this.oPrev.onclick = () => {
                    if (this.oPrev.classList.contains('disabled')) { return }
                    this.page--;
                    this.renderList()
                }
                // 下翻页
                this.oNext.onclick = () => {
                    if (this.oNext.classList.contains('disabled')) { return }
                    this.page++;
                    this.renderList()
                }

                // 分页切换
                for (let i = 0; i < this.oLis.length; i++) {
                    this.oLis[i].onclick = () => {
                        // 页数从1开始
                        this.page = i + 1;
                        this.renderList()
                    }
                }
            }

        }


        new Page('ul', 'ol', 6);


    </script>

</body>

</html>